<template>
  <div>
    <Regmsg backTitle="挂号详情" />
    <Back :isShow="false">
      <div class="nav">
        <p>预约信息</p>
      </div>
      <div class="message">
        <div class="left">
          <p>
            <span>就诊医院</span>
            <span>北京市第一人民医院/东院</span>
          </p>
          <p>
            <span>就诊医生</span>
            <span>宝生永梦</span>
          </p>
          <p>
            <span>门诊时间</span>
            <span>2020-12-30 周一 上午</span>
          </p>
          <p>
            <span>预约时间</span>
            <span>2020-12-12 10:09:09</span>
          </p>
          <p>
            <span>取消时间</span>
            <span>2020-12-12 10:09:09</span>
          </p>
        </div>
        <div class="middle">
          <p>
            <span>医院地址</span>
            <span>北京市大兴区**路990号</span>
          </p>
          <p>
            <span>医生职称</span>
            <span>主任医师</span>
          </p>
          <p>
            <span>候诊时间</span>
            <span>9:30</span>
          </p>
          <p>
            <span>就诊状态</span>
            <span>已取消</span>
          </p>
        </div>
        <div class="right btm-right">
          <p>
            <span>就诊科室</span>
            <span>消化内科-门诊3楼东区501</span>
          </p>
          <p>
            <span>挂号类型</span>
            <span>专家号</span>
          </p>
          <p>
            <span>挂号费</span>
            <span>￥60.00</span>
          </p>
          <p>
            <span>取消原因</span>
            <span>小程序操作取消</span>
          </p>
        </div>
      </div>
      <p class="ipt">
        <span>挂号备注</span>
        <input type="text" placeholder="请输入内容" />
      </p>
      <section>
        <el-button style="width:'60px'" type="primary">确认</el-button>
        <el-button type="primary" plain>取消</el-button>
      </section>
    </Back>
  </div>
</template>
<script>
import { Button } from 'element-ui';
import Regmsg from '@/components/Regmsg/Regmsg.vue';
import Back from '@/components/Part/BackColor.vue'
export default {
  components: {
    Regmsg,
    Back
  },
}
</script>
<style scoped>
.el-button--primary {
  padding: 12px 40px;
}

.topper {
  width: 1280px;
  height: 290px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  border-radius: 8px;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: rgba(242, 242, 242, 1);
  display: flex;
  align-items: center;
}

.nav p {
  color: #006eff;
  font-size: 16px;
  text-indent: 1rem;
}

.message {
  display: flex;
}

.left {
  padding-left: 40px;
  width: 305px;
  padding-right: 100px;
}

.left span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.middle {
  padding-right: 100px;
}

.middle span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.right {
  padding-top: 30px;
}

.right span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 10px;
}

.tx {
  width: 64px;
  height: 64px;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
  box-sizing: border-box;
  border-radius: 50%;
}

.right p:nth-of-type(1) {
  display: flex;
}

span:nth-of-type(1) {
  color: #aaaaaa;
  width: 95px;
}

/* --------------------- */
.bottom {
  width: 1280px;
  height: 515px;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgb(215 215 215);
  border-radius: 8px;
}

.btm-right {
  padding: 0;
}

.ipt span {
  display: inline-block;
  font-size: 14px;
  padding: 25px 0px 10px 50px;
}

.ipt input {
  width: 510px;
  height: 39px;
  border: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-indent: 1rem;
}

/* -------------- */
section {
  padding: 30px 0 0 144px;
}
</style>